<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<!-- <img src="pepper.png" style="width:150px;height: 150px;margin-left: 100px"> -->
	<img id="pimg" src="pepper.png" style="width:150px;height: 150px;margin-left: 100px">

</body>
</html>
<script type="text/javascript">
	var pimg = document.getElementById('pimg')
	// pimg.style.marginLeft ="800px"
	var sum = 100;
	var flag ="right"
	setInterval(function(){
		if(flag=="right" && sum<800){
			sum = sum+10;
			pimg.style.marginLeft = sum +"px";
		}else if(flag=="right" && sum>=800){
			flag = "left";
			sum = sum-10;
			pimg.style.marginLeft = sum +"px";
		}else if(flag=="left" && sum>100){
			sum = sum-10;
			pimg.style.marginLeft = sum +"px";
		}else if(flag=="left" && sum<=100){
			flag ="right";
			sum = sum+10;
			pimg.style.marginLeft = sum +"px";
		}

	},50)
	// 	sum = sum+10;
	// 	if(sum>=800){
	// 		sum=100;
	// 	}
	// 	pimg.style.marginLeft = sum +"px"
	// },50)

</script>